<template>
	<view class="u-page">
		<u-navbar title="成绩" safeAreaInsetTop fixed placeholder :autoBack="true" 
			:lines="20">
			<view class="u-nav-slot" slot="left" @click="close">
				<u-icon name="close" size="19"></u-icon> 
			</view>
			<view class="u-nav-slot" slot="right">
				<u-icon name="more-dot-fill" size="19"></u-icon> 
			</view>
		</u-navbar>
		<view class="u-context">
			<u--text :text="form.examName" size="18"></u--text>
		</view>
		<view class="u-context-center">
			<u--text :text="form.userName" size="14" type="info"></u--text>
			<u--text :text="form.publishTime" size="14" type="info"></u--text>
			<u--text :text="form.subject" size="14" type="info"></u--text>
		</view>
		<view class="u-context-bottom">
			<view class="u-context-bottom-title">
				<u--text text="成绩单" bold size="20"></u--text>
			</view>
			<view class="u-context-bottom-context">
				<view v-for="(item, index) in form.scoreList" class="list-item">
					<view class="list-item-left">
					 <u--text :text="item.label" size="16"></u--text>
					</view>
					<view class="list-item-right">
					 <u--text :text="item.name" color="#0ec86e" size="16"></u--text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					
				}
			}
		},
		created() {
			this.getScoreByScoreExtId();
		},
		methods: {
			click(){
				uni.showToast({
					title: '已阅读',
					icon: 'success',
				});
			},
			getScoreByScoreExtId() {
				let id = this.$route.query.id;
				let param = {
					id: id
				};
				this.$u.api.getScoreByScoreExtId(param).then(res => {
					if(res.code =='200'){
						this.form = res.data;
						this.form.userName = "发布者：" + this.form.userName;
						this.form.subject = "考试科目："+ this.form.subject.replaceAll(",","，");
						this.form.publishTime = "发布时间："+ this.form.publishTime;
					} 
				});
			},
			close(){
				uni.navigateBack();
			} 
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
	.u-page {
		background-color: $u-bg-color;
		width: 80%;
		margin: 10rpx auto;
	}
	.u-context {
		width: 80%;
	}
	.u-context-center {
		margin-left: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
	.u-context-bottom {
		padding: 20rpx;
		border-radius: 3%;
		background-color: #ffffff;
		margin-top: 30rpx;
	}
	.u-context-bottom-title {
		padding-bottom: 30rpx;
	}
	.u-context-bottom-context{
		align-items:center;
	}
	.list-item{
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: 10rpx auto;
		border: 1rpx solid #D8D8D8;
		border-radius: 3%;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.list-item-left {
		margin-left: 20rpx;
	}
	.list-item-right {
		margin-right: 20rpx;
	}
</style>
